
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <title>书库</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="dns-prefetch" href="https://wepay.weipinchu.com/" />
    <link href="https://at.alicdn.com/t/font_fsk2otdio7ds4i.css" rel="stylesheet">
    <link rel="stylesheet" href="https://ommdq027l.qnssl.com/static/release/1500311086095/vendor.css" />
    <link rel="stylesheet" href="https://ommdq027l.qnssl.com/static/release/1500311086095/front.css" />
    <script src="https://ommdq027l.qnssl.com/static/release/1500311086095/vendor.js"></script>
    <script src="https://ommdq027l.qnssl.com/static/release/1500311086095/app.js"></script>
    <script>
      var fromChannelMp = false;
      if (fromChannelMp) {
        LocalCache.remove('profile');
      }
    </script>
    <script type="text/html" id="tmpl-thumb-novel-list">
      <div class="thumb-novel-list">
        {{#each novels}}
        <div class="novel-item">
          <div class="novel-image">
            <a href="/Home/Novel/novelinfo/id/{{id}}"><img src="{:C('FILE_HOST_PATH')}{{avatar}}"/></a>
            {{#if is_time_limited_free}}
              <i class="iconfont icon-time-limited-free"></i>
            {{/if}}
          </div>
          <div class="novel-name">
            <a href="/Home/Novel/novelinfo/id/{{id}}">{{truncate title 6}}</a>
          </div>
        </div>
        {{/each}}
      </div>
    </script>
    <script>
      var HandlebarTemplates = {
        _cache: {},

        get: function (name) {
          if (!this._cache[name]) {
            this._cache[name] = Handlebars.compile($('#' + name).html());
          }

          return this._cache[name];
        }
      }
    </script>

    <script>
      var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?d5e4918c33053db244a223b60906a4d3";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();
    </script>
  </head>
  <body class=" ">
    <include file="Public/menu"/>
    <div class="page-bookstore">
  	<div id="user-profile-bar" class="user-profile-bar" style="<if condition="$user.nickname eq ''">display:none</if>">
	    <a href="/Home/user/userinfo">
	        <span class="headimg"><img style="width:24px;height:24px;vertical-align:middle;border-radius:18px" src="{$user["img"]}"></span>
	        <span class="nickname" style="vertical-align:middle">{$user["nickanme"]}</span>
	        <span style="float:right;vertical-align: middle">个人中心</span>
	    </a>
	</div>

<script>
    $(function () {
        if (!isLoggedIn()) {
            return;
        }

        /*var token = getMemberToken();
        var profile = LocalCache.getObject('profile', { etag: token });
        if (profile) {
            renderProfile(profile);
        } else {
            $.get('/api/my/profile', function (result) {
                LocalCache.set('profile', result.data, { etag: token });
                renderProfile(result.data);
            });
        }

        function renderProfile(profile) {
            var $profile = $('#user-profile-bar');
            $profile.find('.nickname').html(profile.nickname || '匿名用户');
            $profile.find('.uid').html(profile.id);

            if (profile.headimgurl) {
                $profile.find('.headimg').html('<img style="width:24px;height:24px;vertical-align:middle;border-radius:18px" src="{:C('FILE_HOST_PATH')}' + profile.headimgurl + '"/>');
            } else {
                $profile.find('.headimg').html('<i class="iconfont icon-head"></i>');
            }

            $profile.show();
        }*/
    });
</script>
  <div class="panel">
    <div class="options">
      <span class="label">类型:</span>
      <div class="items">
        <a href="javascript:;" class="gender" data-gender="3">男生</a>
        <a href="javascript:;" class="gender" data-gender="4">女生</a>
      </div>
    </div>
    <div class="options">
      <span class="label">分类:</span>
      <div class="items">
        <a href="javascript:;" data-category="" data-gender="none" class="category">全部</a>
        <foreach name="class_list" item="vo">
        	<a href="javascript:;" class="category" data-category="{$vo.class_id}" data-gender="none">{$vo.class_name}</a>
        </foreach>  
     </div>
    </div>
    <div class="options">
      <span class="label">更新:</span>
      <div class="items">
        <a href="javascript:;" class="status" data-status="">全部</a>
        <a href="javascript:;" data-status="0" class="status">连载中</a>
        <a href="javascript:;" data-status="1" class="status">已完结</a>
      </div>
    </div>
  </div>

  <div class="block block-recommend-list" style="margin-top:0">
    <div class="block-body">
      <div class="novel-list recommends">
      </div>
    </div>

    <p class="no-data">查无数据，换个条件试试看吧</p>
  </div>

  <div class="block block-novel-list" style="margin-top:0">
    <div class="block-body">
      <div class="novel-list novels">
      </div>
    </div>

    <p class="no-data">查无数据，换个条件试试看吧</p>
  </div>

  <div class="weui-infinite-scroll">
    <div class="infinite-preloader"></div>
  </div>
</div>

<script type="text/html" id="tmpl-bookstore-novel-item">
  <div class="novel-item">
    <div class="novel-image">
      <a href="/Home/Novel/novelinfo/id/{{id}}">
        <img src="{:C('FILE_HOST_PATH')}{{avatar}}">
      </a>
      {{#if is_time_limited_free}}
      <i class="iconfont icon-time-limited-free"></i>
      {{/if}}
    </div>
    <div class="novel-info">
      <a href="/Home/Novel/novelinfo/id/{{id}}" class="novel-title">{{title}}</a>
      {{#if is_time_limited_free}}
      <div class="novel-meta free-period">
        <i class="iconfont icon-clock"></i>
        <span>限时免费: {{free_start}} ~ {{free_end}}</span>
      </div>
      {{/if}}
      <div class="novel-summary">
        <a href="/Home/Novel/novelinfo/id/{{id}}">{{truncate summary 50}}</a>
      </div>
    </div>
  </div>
</script>

<script>
  function Bookstore () {}

  _.extend(Bookstore.prototype, {
    init: function () {
      var self = this;
      _.extend(self, {
        loading: false,
        params: {
          status: '',
          gender: '',
          category: ''
        },
        pagination: {
          cursor: 0,
          total: 0,
          limit: 20
        },
        dom: {
          body: $('body'),
          page: $('.page-bookstore'),
          nodata: $('.page-bookstore').find('.no-data'),
          novels: $('.page-bookstore').find('.novels'),
          recommends: $('.page-bookstore').find('.recommends'),
          blockrecommend: $('.page-bookstore').find('.block-recommend-list'),
          infinitescroll: $('.page-bookstore').find('.weui-infinite-scroll')
        }
      });

      self.dom.page
        .find('a.gender:first').addClass('active').end()
        .find('a.status:first').addClass('active').end()
        .find('a.category').first().addClass('active').end()
        .hide().filter('[data-gender=none], [data-gender="male"]').show();;
      
      self.dom.page
      .on('click', 'a.category', function (event) {
        self.dom.page.find('a.category').removeClass('active');
        self.params.category = $(event.target).addClass('active').data('category');

        self.fetchData();
      })
      .on('click', 'a.gender', function () {
        self.dom.page.find('a.gender').removeClass('active');
        self.params.gender = $(event.target).addClass('active').data('gender');

        self.dom.page
          .find('a.category').hide().removeClass('active')
          .filter('[data-gender=none], [data-gender='+ self.params.gender +']').show();
        self.params.category = self.dom.page.find('a.category:first').addClass('active').data('category');

        self.fetchData();
      })
      .on('click', 'a.status', function () {
        self.dom.page.find('a.status').removeClass('active');
        self.params.status = $(event.target).addClass('active').data('status');

        self.fetchData();
      });

      self.dom.body.infinite(50).on('infinite', function () {
        self.scroll();
      });
    },
    scroll: function () {
      if (!this.loading && !this.isCompleted()) {
        this.loadMore().then(_.bind(this.renderNovels, this));
      }
    },
    reset: function () {
      _.extend(this, {
        pagination: {
          cursor: 0,
          total: 0,
          limit: 20
        }
      });
    },
    fetchData: function () {
      this.reset();

      var self = this;
      var promises = [this.loadMore()];
      if (this.params.status === '' && this.params.category === '') {
        promises.push(this.loadRecommends());
      }

      $.when.apply($, promises).then(function (novels, recommends) {
        self.renderNovels(novels);
        self.renderRecommands(recommends || []);
      });
    },
    loadRecommends: function () {
      /*return $.get('/api/novel_lists/get/bookstore_recommend_' + this.params.gender)
        .then(function (payload) {
          return payload;
        });*/
    },
    loadMore: function () {
      var self = this;
      this.loading = true;

      return $.get('/Home/Novel/ajaxGetClassList', {
          start: self.pagination.cursor,
          limit: self.pagination.limit,
          is_end: self.params.status,
          other_class_id: self.params.gender,
          class_id: self.params.category
      })
      .always(function () {
        self.loading = false;
      })
      .then(function (payload) {
        return payload;
      });
    },
    renderNovels: function (payload) {
      this.dom.nodata[payload.data.length === 0 ? 'show' : 'hide']();

      var html = _.map(payload.data, function (novel) {
        if (novel.is_time_limited_free) {
          _.extend(novel, {
            free_start: moment(novel.free_time_start * 1000).format('M月D日'),
            free_end: moment(novel.free_time_end * 1000).format('M月D日')
          });
        }

        return HandlebarTemplates.get('tmpl-bookstore-novel-item')(novel);
      });
      
      this.dom.novels[this.pagination.cursor === 0 ? 'html' : 'append'](html.join(''));
      this.pagination.cursor += payload.data.length;
      this.pagination.total = payload.total;

      this.dom.infinitescroll[this.isCompleted() ? 'hide' : 'show']();
    },
    renderRecommands: function (payload) {
      var html = _.chain(payload.data).map(function (novel) {
        return HandlebarTemplates.get('tmpl-bookstore-novel-item')(novel);
      }).value();

      this.dom.blockrecommend[payload.data && payload.data.length ? 'show' : 'hide']();
      this.dom.recommends.html(html.join(''));
    },
    isCompleted: function () {
      return this.pagination.total <= this.pagination.cursor;
    }
  });

  $(function () {
    'use strict';

    var bookstore = new Bookstore();
    bookstore.init();
    bookstore.fetchData();
  });
</script>

    </body>
</html>
